<template>
	<view>
		<l-file v-show="false" ref="lFile"></l-file>
		<!-- 公司诉求 -->
		<view class="appeal-item" v-if="item.type == 5">
			<view class="title" @click="handleCall(item.phones)">
				{{item.enterprise_name}} 诉求：
			</view>
			<view class="content">
				{{item.content}}
			</view>
			<view class="time">
				{{item.createtime | formatDate}}
			</view>
		</view>
		<!-- 交办 -->
		<view class="appeal-item" v-if="item.type == 1">
			<view class="title" @click="handleCall(item.phones)">
				{{item.now_organization_classify}} {{item.now_organization_name}}
			</view>
			<view class="content">
				交办：{{item.organization_classify + item.organization_name}}
				<view class="" style="margin-top: 20rpx;" v-if="item.message">
					备注：{{item.message}}
				</view>
			</view>

			<view class="time">
				{{item.createtime | formatDate}}
			</view>
		</view>
		<!-- 诉求反馈 -->
		<view class="appeal-item" v-if="item.type == 2">
			<view class="title" @click="handleCall(item.phones)">
				{{item.now_organization_classify || '中台管理员'}} {{item.now_organization_name}} 提交诉求反馈：
				<text class="status" v-if="item.sh_status == 1">{{item.sh_status | filterStatus}}</text>
				<text class="status status2" v-if="item.sh_status == 2">{{item.sh_status | filterStatus}}</text>
				<text class="status status1" v-if="item.sh_status == 3">{{item.sh_status | filterStatus}}</text>
			</view>
			<view class="content">
				<!-- 反馈内容 -->
				<view>
					{{item.message}}
				</view>
				<!-- 反馈图片 -->
				<!-- <view class="img-wrap" v-if="appealDetail.material_files"> -->
				<view class="img-wrap" v-if="imgList.length > 0">
					<u-image v-for="(item,index) in imgList" @click="previewImag(item.link)" class="img" width="182rpx"
						height="182rpx" border-radius="10rpx" :src="item.link" :key="index"></u-image>
				</view>
				<!-- 反馈文件 -->
				<view class="file-list" v-if="fileList.length > 0">
					<view class="file-item" v-for="(item, index) in fileList" :key="index"
						@click="previewFile(item.link)">
						<u-icon name="attach" color="#2979ff" size="28"></u-icon>
						<view class="file-name font-overflow">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="time">
				<text>{{item.createtime | formatDate}}</text>
				<text style="padding: 20rpx;color: #196EFF;" @click="handleCopy(item.message)">复制</text>
			</view>
			<!-- 部门领导驳回备注 -->
			<view class="content" v-if="item.approve_message">
				<!-- 反馈内容 -->
				<view>
					<view>
						部门领导驳回并备注：
					</view>
					{{item.approve_message}}
				</view>
				<!-- 反馈图片 -->
				<!-- <view class="img-wrap" v-if="appealDetail.material_files"> -->
				<view class="img-wrap" v-if="imgList.length > 0">
					<u-image v-for="(item,index) in imgList" @click="previewImag(item.link)" class="img" width="182rpx"
						height="182rpx" border-radius="10rpx" :src="item.link" :key="index"></u-image>
				</view>
				<!-- 反馈文件 -->
				<view class="file-list" v-if="fileList.length > 0">
					<view class="file-item" v-for="(item, index) in fileList" :key="index"
						@click="previewFile(item.link)">
						<u-icon name="attach" color="#2979ff" size="28"></u-icon>
						<view class="file-name font-overflow">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="time" v-if="item.approve_message">
				<text>{{item.approve_time | formatDate}}</text>
				<text style="padding-left: 20rpx;color: #196EFF;" @click="handleCopy(item.approve_message)">复制</text>
			</view>
		</view>
		<!-- 提交公示 -->
		<view class="appeal-item" v-if="item.type == 3">
			<view class="title" @click="handleCall(item.phones)">
				中台管理员 提交公示：
			</view>
			<view class="content">
				{{item.message}}
			</view>
			<view class="time">
				<text>{{item.createtime | formatDate}}</text>
				<text style="padding-left: 20rpx;color: #196EFF;" @click="handleCopy(item.message)">复制</text>
			</view>
		</view>
		<!-- 评论 -->
		<view class="appeal-item" v-if="item.type == 4">
			<view class="title" @click="handleCall(item.phones)">
				<!-- {{item.now_organization_classify || '园区领导'}} {{item.now_organization_name}} 评论： -->
				<text>{{'园区领导' + ' '}}</text> {{ item.now_organization_name}} 评论：
			</view>
			<view class="content">
				{{item.message}}
			</view>
			<view class="time">
				{{item.createtime | formatDate}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'AppealItem',
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				imgList: [],
				fileList: [],
				statusStr: '',
			}
		},
		created() {
			//当前记录为诉求反馈时执行
			if (this.item.type == 2 && this.item.files) {
				this.setFile(this.item.files, this.imgList, this.fileList);
				// this.item.files.forEach(item => {
				// 	const exe = item.name.split('.');
				// 	if (this.imgExeList.includes(exe[1])) {
				// 		this.imgList.push(item)
				// 	} else {
				// 		this.fileList.push(item);
				// 	}
				// })
			}
		},
		methods: {
			// 筛选文件类型
			setFile (arr, imgArr, fileArr) {
				//图片类型
				const imgExeList = ['bmp', 'jpg', 'jpeg', 'png'];
				arr.forEach(item => {
					const exe = item.name.split('.');
					if (imgExeList.includes(exe[1])) {
						imgArr.push(item)
					} else {
						fileArr.push(item);
					}
				})
			},
			//复制材料
			handleCopy(text) {
				console.log(text)
				const that = this;
				uni.setClipboardData({
					data: text,
					success(res) {
						console.log(res)
					}
				})
			},
			handleCall(phoneNumber) {
				console.log(phoneNumber)
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				});
			},
			//图片预览
			previewImag(src) {
				const imgList = [];
				this.imgList.forEach(item => {
					imgList.push(item.link);
				})
				wx.previewImage({
					current: src, // 当前显示图片的http链接
					urls: imgList // 需要预览的图片http链接列表
				})
			},
			previewFile(url) {
				this.$refs.lFile.download({
						url
					})
					.then(path => {
						/* 打开附件 */
						this.$refs.lFile.open(path);
					});
			}
		},
		filters: {
			filterStatus(value) {
				const val = Number(value);
				let statusStr = ''
				switch (val) {
					case 1:
						statusStr = '待审核'
						break;
					case 2:
						statusStr = '已通过'
						break;
					case 3:
						statusStr = '被驳回'
						break;
					default:
						break;
				}
				return statusStr
			}
		}
	}
</script>

<style lang="scss" scoped>
	.appeal-item:nth-child(-n + 3) {
		.title {
			color: #000000;
		}

		.content {
			color: #000000;
		}

		.time {
			color: #000000;
		}
	}

	.title {
		position: relative;
		font-size: 30rpx;
		font-weight: 500;
		color: #929292;

		//待审核
		.status {
			position: absolute;
			right: 0;
			padding: 0 5rpx;
			background: #A0A0A0;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			font-size: 24rpx;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FFFFFF;
			//被驳回
			&.status1 {
				background: #FF0000;
			}
			
			//已解决
			&.status2 {
				background: #13E139;
			}
		}

		
	}

	.content {
		padding: 20rpx;
		margin-top: 19rpx;
		font-size: 28rpx;
		color: #929292;
		background: #EAF1F9;
		border-radius: 10rpx;
	}

	.time {
		margin: 21rpx 0 20rpx 23rpx;
		font-size: 24rpx;
		color: #929292;
	}

	.img-wrap {
		display: flex;
		margin-top: 30rpx;

		.img:not(:first-child) {
			margin-left: 20rpx;
		}
	}

	//反馈文件列表
	.file-list {
		margin-top: 20rpx;

		.file-item {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			padding: 0 15rpx;
			width: 440rpx;
			height: 50rpx;
			background: #FFFFFF;
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			opacity: 1;
			border: 1rpx solid #868686;

			.file-name {
				margin-left: 12rpx;
			}
		}
	}
</style>
